import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import Newsletter from '../../ch/components/Newsletter.vue'

<Meta
  title="Components/Newsletter"
  component={Newsletter}
  argTypes={{
    type: { control: { type: 'select', options: ['default', 'inline'] } },
    state: { control: { type: 'select', options: ['default', 'sent'] } },
  }} />

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Newsletter },
  template: '<main style="max-width: 600px; margin: auto"><Newsletter :type="type" :state="state" :title="title" :text="text" :input-label="inputLabel" :button-label="buttonLabel" :success-text="successText"/></main>',
})

export const TemplateDetail = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Newsletter },
  template: '<main><div class="container container--grid gap--responsive"><div class="container__center--xs vertical-spacing"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p><Newsletter :type="type" :state="state" :title="title" :text="text" :input-label="inputLabel" :button-label="buttonLabel" :success-text="successText"/><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p></div></div></main>',
})

export const defaultArgs = {
  type: 'default',
  state: 'default',
  title: 'Abonnieren Sie unseren Newsletter',
  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo',
  inputLabel: 'E-Mail',
  buttonLabel: 'Newsletter abonnieren',
  successText: 'Danke für Ihre Anmeldung. Sie sollten gerade eine Email bekommen haben.  <strong>Bitte klicken sie den enthaltenen Link um die Anmeldung zu abschliessen.</strong>'
}

# Newsletter

## Example

The default newsletter component can for example be placed in a sidebar on a [Detail Page Complex](?path=/docs/pages-detail-page-complex--example).

<Canvas>
  <Story
    name="Example"
    args={defaultArgs}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />


## Example with inline form

If the component is placed in a big enough context, you can display the form inline by adding the `.newsletter--inline` class.

<Canvas>
  <Story
    name="Example Inline Form"
    args={{
      ...defaultArgs,
      type: 'inline'
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Example on simple detail pages

When the newsletter component is placed on a [Detail Page Simple](?path=/docs/pages-detail-page-simple--example) inside a `.container__center--xs` container, it will have a slightly different layout (broader than container, more spacings).

<Canvas>
  <Story
    name="Example Detail Page"
    args={{
      ...defaultArgs,
      type: 'inline'
    }}
  >
    {TemplateDetail.bind({})}
  </Story>
</Canvas>
